<template>
	<view class="content">
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<condition :data="otherParams" @sendCondition="getCondition"></condition>
			</scroll-view>
		</uni-drawer>
		<uni-nav-bar left-icon="arrowleft" :statusBar="true" :fixed="true" title="消息通知" color="#fff"
			background-color="#f29004" @clickLeft="back" @clickRight="showDrawer" right-text="筛选">
		</uni-nav-bar>

		<view class="list">
			<view class="list-group">
				<view class="list-item" v-for="(message, index) in messages" :key="index">
					<view class="panel" @tap="openPage(message)">
						<view v-show="message.message_status == 0" class="panel-badge"></view>
						<view class="panel-group">
							<view class="panel-item">
								<text class="panel-item-header">标题：</text>
								<text class="panel-item-body">{{ message.message_title }}</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">内容：</text>
								<text class="panel-item-body">{{ message.message_content }}</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">时间：</text>
								<text class="panel-item-body">{{ message.create_time }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import condition from '@/components/condition/message.vue'
	import {queryMessageList} from '@/api/configure.js';
	import {deepClone,mergeUrls,getUserInfo} from '@/util/util.js';
	import {pathToBase64,base64ToPath} from '@/util/mmmm-image-tools/index.js';
	import configUrl from '@/util/url.js';

	export default {
		components: {
			condition
		},
		data() {
			return {
				messages: [],
				pageNum: 1,
				pageSize: 10,
				total: 100,
				status: 'more',
				messageTypes: [{
					value: 4,
					label: '案件流转案件分派'
				},{
					value: 3,
					label: '案件流转签到消息'
				},{
					value: 6,
					label: '案件流转考核任务'
				},{
					value: 7,
					label: '预警消息'
				},{
					value: 8,
					label: '派遣信息'
				},{
					value: 9,
					label: '雨水信息'
				},{
					value: 10,
					label: '重点巡查任务'
				},{
					value: 11,
					label: '防汛消息'
				},{
					value: 12,
					label: '天气消息'
				}],
				otherParams: {
					messageType: '4'
				}
			}
		},
		methods: {
			getCondition(res) {
				Object.keys(res).forEach((key) => {
					this.otherParams[key] = res[key]
				})

				this.reset();

				this.closeDrawer();
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			init() {
				this.getMessageList();

				uni.$on('message.message.reset', this.changeMessageStatus)
			},
			changeMessageStatus({messageId}) {
				let index = this.messages.findIndex((message) => message.message_id == messageId );
				
				this.messages[index]['message_status'] = 1;
			},
			async getMessageList(userId) {
				let userInfo = getUserInfo();

				if (!userInfo) {
					return
				}

				let data = {
					userId: userInfo.userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}

				Object.assign(data, this.otherParams);

				await queryMessageList(data).then((res) => {
					let messages = res.rows.slice(0);

					this.messages = [...this.messages, ...messages];
					this.total = res.total;

					if (this.pageNum * this.pageSize >= this.total) {
						this.status = "noMore";
					} else {
						this.status = "more";
					}
				});
			},
			openPage(data) {
				let url = mergeUrls('./detail', data);

				uni.navigateTo({
					url: url
				});
			},
			reset() {
				this.messages = [];
				this.pageNum = 1;
				this.pageSize = 10;
				this.total = 100;

				this.getMessageList().then(() => {
					uni.stopPullDownRefresh();
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad() {
			this.init();
		},
		onUnload() {
			uni.$off('message.message.reset');
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize >= this.total) {
				this.status = "noMore";
				return;
			} else {
				this.pageNum = this.pageNum + 1;
				this.status = 'loading';
			}

			setTimeout(() => {
				this.getMessageList();
			}, 300);
		},
		onPullDownRefresh() {
			this.reset();
		}
	}
</script>

<style lang="scss">
	.list {
		.list-group {
			.list-item {
				padding: 20rpx 30rpx 10rpx;
				margin-bottom: 20rpx;
				position: relative;
				top: 0rpx;
				left: 0rpx;

				&:after {
					content: '';
					position: absolute;
					bottom: 0rpx;
					left: 30rpx;
					right: 30rpx;
					height: 1rpx;
					transform: scaleY(.5);
					transform-origin: 0 0;
					box-sizing: border-box;
					background-color: #dedede;
				}
			}
		}
	}

	.panel {
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.panel-badge {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: #d81e06;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
		}

		.panel-group {
			.panel-item {
				margin-bottom: 10rpx;
				font-size: 24rpx;
				color: #5d5d5d;
			}
		}
	}
</style>
